<template>
  <div>
    <div class="content-section">
      <el-button type="primary" size="medium" @click="getDeviceId">申请实验箱</el-button>
<!--      <p style="text-align: left;padding-left: 50px">当前实验箱使用数量： </p>-->
    </div>
  <div class="content-section even">
    <el-row>
      <el-col :span="24">
        <el-col :span="15">
          <div>
            <video id="videoElement" controls autoplay muted width="90%" height="100%">
            </video>
          </div>
        </el-col>
        <el-col :span="9" style="padding: 50px">
          <div class="content">
            <h2>上传代码</h2>
            <el-card class="box-card">
              <p>{{this.burningInformation}}</p>
            </el-card>
            <el-upload
                       :action="getMediaUrl"
                       :headers="headers"
                       :data="{deviceId: this.deviceList.deviceId}"
                       :show-file-list="false"
                       :on-progress="onProgress"
                       :on-success="onSuccess"
                       :file-list="codeFileList">
              <el-tooltip effect="dark" content="上传代码" placement="top" :enterable="false">
                <el-button type="primary" icon="el-icon-upload" size="medium">上传代码</el-button>
              </el-tooltip>
            </el-upload>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
  </div>
</template>

<script>
import flvjs from 'flv.js'
export default {
  data () {
    return {
      flvPlayer: null,
      getMediaUrl: 'http://cn1.utools.club:38298/getMediaUrl',
      mediaUrl: '',
      codeFileList: [],
      codeUploadUrl: '',
      headers: {
        Authorization: window.sessionStorage.getItem('token')
      },
      num: 0,
      deviceList: [],
      burningInformation: ''
    }
  },
  mounted () {
    if (flvjs.isSupported()) {
      var videoElement = document.getElementById('videoElement')
      this.flvPlayer = flvjs.createPlayer({
        type: 'mp4',
        isLive: true,
        hasAudio: true,
        cors: true,
        url: this.mediaUrl
        /* url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' */
      })
      this.flvPlayer.attachMediaElement(videoElement)
      this.flvPlayer.load()
      this.flvPlayer.play()
    }
  },
  methods: {
    // 申请设备
    async getDeviceId () {
      const { data: res } = await this.$http.post('/getDeviceId')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取设备信息失败' + res.data.msg)
      const deviceList = res.data
      this.deviceList = deviceList.data
      console.log(deviceList)
      this.$message.success('获取设备信息成功')
    },
    // 轮询查看烧录信息
    async onProgress () {
      window.timer = setInterval(() => {
        setTimeout(this.pollingInformation, 0)
      }, 5000)
    },
    // 查看烧录信息
    async pollingInformation () {
      const { data: res } = await this.$http.post('/pollingInformation', { deviceId: this.deviceList.deviceId })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取信息失败' + res.data.msg)
      this.burningInformation = res.data.data
      console.log(this.burningInformation)
    },
    // 文件上传成功后获取流媒体链接
    async onSuccess (res) {
      this.$message.success(res.data.msg)
      this.mediaUrl = res.data.mediaUrl
      console.log(this.mediaUrl)
      clearInterval(window.timer)
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  height: 260px;
  margin-bottom: 10px;

}
</style>
